import { Descriptions } from 'antd'
import './index.less'
import React from 'react'
interface Iprops {
  title: string
  list: listArrType[]
  column?: columnType
  children?: React.ReactNode
}

interface listArrType {
  label: string
  content: string | React.ReactNode
  labelStyle?: React.CSSProperties
  [propName: string]: any
}

type columnEnum = 5 | 4 | 3 | 2 | 1

interface columnType {
  xxl?: columnEnum
  xl?: columnEnum
  lg?: columnEnum
  md?: columnEnum
  sm?: columnEnum
  xs?: columnEnum
}

export default function DescriptionsComponent(props: Iprops) {
  return (
    <div
      className="descriptions_box"
      style={{
        marginBottom: 12,
      }}
    >
      <Descriptions
        title={props.title ? props.title : ''}
        column={props.column ? props.column : { xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}
      >
        {props?.list && props?.list?.length > 0
          ? props?.list?.map((item) => {
              return (
                <Descriptions.Item
                  className="descriptions_item"
                  style={{ paddingRight: 10 }}
                  labelStyle={item.labelStyle ? item.labelStyle : {}}
                  key={item.label}
                  label={item.label}
                >
                  {item.content}
                </Descriptions.Item>
              )
            })
          : props?.children}
      </Descriptions>
    </div>
  )
}
